// import { IconButton } from "./button";
// import { ErrorBoundary } from "./error";
// import styles from "./mcp-market.module.scss";
// import EditIcon from "../icons/edit.svg";
// import AddIcon from "../icons/add.svg";
// import CloseIcon from "../icons/close.svg";
// import DeleteIcon from "../icons/delete.svg";
// import RestartIcon from "../icons/reload.svg";
// import EyeIcon from "../icons/eye.svg";
// import GithubIcon from "../icons/github.svg";
// import { List, ListItem, Modal, showToast } from "./ui-lib";
// import { useNavigate } from "react-router-dom";
// import { useEffect, useState } from "react";
// // import {
// //   addMcpServer,
// //   getClientsStatus,
// //   getClientTools,
// //   getMcpConfigFromFile,
// //   isMcpEnabled,
// //   pauseMcpServer,
// //   restartAllClients,
// //   resumeMcpServer,
// // } from "../mcp/actions";
// import {
//   ListToolsResponse,
//   McpConfigData,
//   PresetServer,
//   ServerConfig,
//   ServerStatusResponse,
// } from "../mcp/types";
// import clsx from "clsx";
// import PlayIcon from "../icons/play.svg";
// import StopIcon from "../icons/pause.svg";
// import { Path } from "../constant";
//
// interface ConfigProperty {
//   type: string;
//   description?: string;
//   required?: boolean;
//   minItems?: number;
// }
//
// export function McpMarketPage() {
//   const navigate = useNavigate();
//   const [mcpEnabled, setMcpEnabled] = useState(false);
//   const [searchText, setSearchText] = useState("");
//   const [userConfig, setUserConfig] = useState<Record<string, any>>({});
//   const [editingServerId, setEditingServerId] = useState<string | undefined>();
//   const [tools, setTools] = useState<ListToolsResponse["tools"] | null>(null);
//   const [viewingServerId, setViewingServerId] = useState<string | undefined>();
//   const [isLoading, setIsLoading] = useState(false);
//   const [config, setConfig] = useState<McpConfigData>();
//   const [clientStatuses, setClientStatuses] = useState<
//     Record<string, ServerStatusResponse>
//   >({});
//   const [loadingPresets, setLoadingPresets] = useState(true);
//   const [presetServers, setPresetServers] = useState<PresetServer[]>([]);
//   const [loadingStates, setLoadingStates] = useState<Record<string, string>>(
//     {},
//   );
//
//   // 检查 MCP 是否启用
//   useEffect(() => {
//     // const checkMcpStatus = async () => {
//     //   const enabled = await isMcpEnabled();
//     //   setMcpEnabled(enabled);
//     //   if (!enabled) {
//     //     navigate(Path.Home);
//     //   }
//     // };
//     // checkMcpStatus();
//   }, [navigate]);
//
//   // 添加状态轮询
//   useEffect(() => {
//     if (!mcpEnabled || !config) return;
//
//     // const updateStatuses = async () => {
//     //   const statuses = await getClientsStatus();
//     //   setClientStatuses(statuses);
//     // };
//
//     // 立即执行一次
//     // updateStatuses();
//     // 每 1000ms 轮询一次
//     // const timer = setInterval(updateStatuses, 1000);
//
//     return () => clearInterval(timer);
//   }, [mcpEnabled, config]);
//
//   // 加载预设服务器
//   useEffect(() => {
//     const loadPresetServers = async () => {
//       if (!mcpEnabled) return;
//       try {
//         setLoadingPresets(true);
//         const response = await fetch("https://nextchat.club/mcp/list");
//         if (!response.ok) {
//           throw new Error("Failed to load preset servers");
//         }
//         const data = await response.json();
//         setPresetServers(data?.data ?? []);
//       } catch (error) {
//         console.error("Failed to load preset servers:", error);
//         showToast("Failed to load preset servers");
//       } finally {
//         setLoadingPresets(false);
//       }
//     };
//     loadPresetServers();
//   }, [mcpEnabled]);
//
//   // 加载初始状态
//   useEffect(() => {
//     const loadInitialState = async () => {
//       if (!mcpEnabled) return;
//       try {
//         setIsLoading(true);
//         const config = await getMcpConfigFromFile();
//         setConfig(config);
//
//         // 获取所有客户端的状态
//         const statuses = await getClientsStatus();
//         setClientStatuses(statuses);
//       } catch (error) {
//         console.error("Failed to load initial state:", error);
//         showToast("Failed to load initial state");
//       } finally {
//         setIsLoading(false);
//       }
//     };
//     loadInitialState();
//   }, [mcpEnabled]);
//
//   // 加载当前编辑服务器的配置
//   useEffect(() => {
//     if (!editingServerId || !config) return;
//     const currentConfig = config.mcpServers[editingServerId];
//     if (currentConfig) {
//       // 从当前配置中提取用户配置
//       const preset = presetServers.find((s) => s.id === editingServerId);
//       if (preset?.configSchema) {
//         const userConfig: Record<string, any> = {};
//         Object.entries(preset.argsMapping || {}).forEach(([key, mapping]) => {
//           if (mapping.type === "spread") {
//             // For spread types, extract the array from args.
//             const startPos = mapping.position ?? 0;
//             userConfig[key] = currentConfig.args.slice(startPos);
//           } else if (mapping.type === "single") {
//             // For single types, get a single value
//             userConfig[key] = currentConfig.args[mapping.position ?? 0];
//           } else if (
//             mapping.type === "env" &&
//             mapping.key &&
//             currentConfig.env
//           ) {
//             // For env types, get values from environment variables
//             userConfig[key] = currentConfig.env[mapping.key];
//           }
//         });
//         setUserConfig(userConfig);
//       }
//     } else {
//       setUserConfig({});
//     }
//   }, [editingServerId, config, presetServers]);
//
//   if (!mcpEnabled) {
//     return null;
//   }
//
//   // 检查服务器是否已添加
//   const isServerAdded = (id: string) => {
//     return id in (config?.mcpServers ?? {});
//   };
//
//   // 保存服务器配置
//   const saveServerConfig = async () => {
//     const preset = presetServers.find((s) => s.id === editingServerId);
//     if (!preset || !preset.configSchema || !editingServerId) return;
//
//     const savingServerId = editingServerId;
//     setEditingServerId(undefined);
//
//     try {
//       updateLoadingState(savingServerId, "Updating configuration...");
//       // 构建服务器配置
//       const args = [...preset.baseArgs];
//       const env: Record<string, string> = {};
//
//       Object.entries(preset.argsMapping || {}).forEach(([key, mapping]) => {
//         const value = userConfig[key];
//         if (mapping.type === "spread" && Array.isArray(value)) {
//           const pos = mapping.position ?? 0;
//           args.splice(pos, 0, ...value);
//         } else if (
//           mapping.type === "single" &&
//           mapping.position !== undefined
//         ) {
//           args[mapping.position] = value;
//         } else if (
//           mapping.type === "env" &&
//           mapping.key &&
//           typeof value === "string"
//         ) {
//           env[mapping.key] = value;
//         }
//       });
//
//       const serverConfig: ServerConfig = {
//         command: preset.command,
//         args,
//         ...(Object.keys(env).length > 0 ? { env } : {}),
//       };
//
//       const newConfig = await addMcpServer(savingServerId, serverConfig);
//       setConfig(newConfig);
//       showToast("Server configuration updated successfully");
//     } catch (error) {
//       showToast(
//         error instanceof Error ? error.message : "Failed to save configuration",
//       );
//     } finally {
//       updateLoadingState(savingServerId, null);
//     }
//   };
//
//   // 获取服务器支持的 Tools
//   const loadTools = async (id: string) => {
//     try {
//       const result = await getClientTools(id);
//       if (result) {
//         setTools(result);
//       } else {
//         throw new Error("Failed to load tools");
//       }
//     } catch (error) {
//       showToast("Failed to load tools");
//       console.error(error);
//       setTools(null);
//     }
//   };
//
//   // 更新加载状态的辅助函数
//   const updateLoadingState = (id: string, message: string | null) => {
//     setLoadingStates((prev) => {
//       if (message === null) {
//         const { [id]: _, ...rest } = prev;
//         return rest;
//       }
//       return { ...prev, [id]: message };
//     });
//   };
//
//   // 修改添加服务器函数
//   const addServer = async (preset: PresetServer) => {
//     if (!preset.configurable) {
//       try {
//         const serverId = preset.id;
//         updateLoadingState(serverId, "Creating MCP client...");
//
//         const serverConfig: ServerConfig = {
//           command: preset.command,
//           args: [...preset.baseArgs],
//         };
//         const newConfig = await addMcpServer(preset.id, serverConfig);
//         setConfig(newConfig);
//
//         // 更新状态
//         const statuses = await getClientsStatus();
//         setClientStatuses(statuses);
//       } finally {
//         updateLoadingState(preset.id, null);
//       }
//     } else {
//       // 如果需要配置，打开配置对话框
//       setEditingServerId(preset.id);
//       setUserConfig({});
//     }
//   };
//
//   // 修改暂停服务器函数
//   const pauseServer = async (id: string) => {
//     try {
//       updateLoadingState(id, "Stopping server...");
//       const newConfig = await pauseMcpServer(id);
//       setConfig(newConfig);
//       showToast("Server stopped successfully");
//     } catch (error) {
//       showToast("Failed to stop server");
//       console.error(error);
//     } finally {
//       updateLoadingState(id, null);
//     }
//   };
//
//   // Restart server
//   const restartServer = async (id: string) => {
//     try {
//       updateLoadingState(id, "Starting server...");
//       await resumeMcpServer(id);
//     } catch (error) {
//       showToast(
//         error instanceof Error
//           ? error.message
//           : "Failed to start server, please check logs",
//       );
//       console.error(error);
//     } finally {
//       updateLoadingState(id, null);
//     }
//   };
//
//   // Restart all clients
//   const handleRestartAll = async () => {
//     try {
//       updateLoadingState("all", "Restarting all servers...");
//       const newConfig = await restartAllClients();
//       setConfig(newConfig);
//       showToast("Restarting all clients");
//     } catch (error) {
//       showToast("Failed to restart clients");
//       console.error(error);
//     } finally {
//       updateLoadingState("all", null);
//     }
//   };
//
//   // Render configuration form
//   const renderConfigForm = () => {
//     const preset = presetServers.find((s) => s.id === editingServerId);
//     if (!preset?.configSchema) return null;
//
//     return Object.entries(preset.configSchema.properties).map(
//       ([key, prop]: [string, ConfigProperty]) => {
//         if (prop.type === "array") {
//           const currentValue = userConfig[key as keyof typeof userConfig] || [];
//           const itemLabel = (prop as any).itemLabel || key;
//           const addButtonText =
//             (prop as any).addButtonText || `Add ${itemLabel}`;
//
//           return (
//             <ListItem
//               key={key}
//               title={key}
//               subTitle={prop.description}
//               vertical
//             >
//               <div className={styles["path-list"]}>
//                 {(currentValue as string[]).map(
//                   (value: string, index: number) => (
//                     <div key={index} className={styles["path-item"]}>
//                       <input
//                         type="text"
//                         value={value}
//                         placeholder={`${itemLabel} ${index + 1}`}
//                         onChange={(e) => {
//                           const newValue = [...currentValue] as string[];
//                           newValue[index] = e.target.value;
//                           setUserConfig({ ...userConfig, [key]: newValue });
//                         }}
//                       />
//                       <IconButton
//                         icon={<DeleteIcon />}
//                         className={styles["delete-button"]}
//                         onClick={() => {
//                           const newValue = [...currentValue] as string[];
//                           newValue.splice(index, 1);
//                           setUserConfig({ ...userConfig, [key]: newValue });
//                         }}
//                       />
//                     </div>
//                   ),
//                 )}
//                 <IconButton
//                   icon={<AddIcon />}
//                   text={addButtonText}
//                   className={styles["add-button"]}
//                   bordered
//                   onClick={() => {
//                     const newValue = [...currentValue, ""] as string[];
//                     setUserConfig({ ...userConfig, [key]: newValue });
//                   }}
//                 />
//               </div>
//             </ListItem>
//           );
//         } else if (prop.type === "string") {
//           const currentValue = userConfig[key as keyof typeof userConfig] || "";
//           return (
//             <ListItem key={key} title={key} subTitle={prop.description}>
//               <input
//                 aria-label={key}
//                 type="text"
//                 value={currentValue}
//                 placeholder={`Enter ${key}`}
//                 onChange={(e) => {
//                   setUserConfig({ ...userConfig, [key]: e.target.value });
//                 }}
//               />
//             </ListItem>
//           );
//         }
//         return null;
//       },
//     );
//   };
//
//   const checkServerStatus = (clientId: string) => {
//     return clientStatuses[clientId] || { status: "undefined", errorMsg: null };
//   };
//
//   const getServerStatusDisplay = (clientId: string) => {
//     const status = checkServerStatus(clientId);
//
//     const statusMap = {
//       undefined: null, // 未配置/未找到不显示
//       // 添加初始化状态
//       initializing: (
//         <span className={clsx(styles["server-status"], styles["initializing"])}>
//           Initializing
//         </span>
//       ),
//       paused: (
//         <span className={clsx(styles["server-status"], styles["stopped"])}>
//           Stopped
//         </span>
//       ),
//       active: <span className={styles["server-status"]}>Running</span>,
//       error: (
//         <span className={clsx(styles["server-status"], styles["error"])}>
//           Error
//           <span className={styles["error-message"]}>: {status.errorMsg}</span>
//         </span>
//       ),
//     };
//
//     return statusMap[status.status];
//   };
//
//   // Get the type of operation status
//   const getOperationStatusType = (message: string) => {
//     if (message.toLowerCase().includes("stopping")) return "stopping";
//     if (message.toLowerCase().includes("starting")) return "starting";
//     if (message.toLowerCase().includes("error")) return "error";
//     return "default";
//   };
//
//   // 渲染服务器列表
//   const renderServerList = () => {
//     if (loadingPresets) {
//       return (
//         <div className={styles["loading-container"]}>
//           <div className={styles["loading-text"]}>
//             Loading preset server list...
//           </div>
//         </div>
//       );
//     }
//
//     if (!Array.isArray(presetServers) || presetServers.length === 0) {
//       return (
//         <div className={styles["empty-container"]}>
//           <div className={styles["empty-text"]}>No servers available</div>
//         </div>
//       );
//     }
//
//     return presetServers
//       .filter((server) => {
//         if (searchText.length === 0) return true;
//         const searchLower = searchText.toLowerCase();
//         return (
//           server.name.toLowerCase().includes(searchLower) ||
//           server.description.toLowerCase().includes(searchLower) ||
//           server.tags.some((tag) => tag.toLowerCase().includes(searchLower))
//         );
//       })
//       .sort((a, b) => {
//         const aStatus = checkServerStatus(a.id).status;
//         const bStatus = checkServerStatus(b.id).status;
//         const aLoading = loadingStates[a.id];
//         const bLoading = loadingStates[b.id];
//
//         // 定义状态优先级
//         const statusPriority: Record<string, number> = {
//           error: 0, // Highest priority for error status
//           active: 1, // Second for active
//           initializing: 2, // Initializing
//           starting: 3, // Starting
//           stopping: 4, // Stopping
//           paused: 5, // Paused
//           undefined: 6, // Lowest priority for undefined
//         };
//
//         // Get actual status (including loading status)
//         const getEffectiveStatus = (status: string, loading?: string) => {
//           if (loading) {
//             const operationType = getOperationStatusType(loading);
//             return operationType === "default" ? status : operationType;
//           }
//
//           if (status === "initializing" && !loading) {
//             return "active";
//           }
//
//           return status;
//         };
//
//         const aEffectiveStatus = getEffectiveStatus(aStatus, aLoading);
//         const bEffectiveStatus = getEffectiveStatus(bStatus, bLoading);
//
//         // 首先按状态排序
//         if (aEffectiveStatus !== bEffectiveStatus) {
//           return (
//             (statusPriority[aEffectiveStatus] ?? 6) -
//             (statusPriority[bEffectiveStatus] ?? 6)
//           );
//         }
//
//         // Sort by name when statuses are the same
//         return a.name.localeCompare(b.name);
//       })
//       .map((server) => (
//         <div
//           className={clsx(styles["mcp-market-item"], {
//             [styles["loading"]]: loadingStates[server.id],
//           })}
//           key={server.id}
//         >
//           <div className={styles["mcp-market-header"]}>
//             <div className={styles["mcp-market-title"]}>
//               <div className={styles["mcp-market-name"]}>
//                 {server.name}
//                 {loadingStates[server.id] && (
//                   <span
//                     className={styles["operation-status"]}
//                     data-status={getOperationStatusType(
//                       loadingStates[server.id],
//                     )}
//                   >
//                     {loadingStates[server.id]}
//                   </span>
//                 )}
//                 {!loadingStates[server.id] && getServerStatusDisplay(server.id)}
//                 {server.repo && (
//                   <a
//                     href={server.repo}
//                     target="_blank"
//                     rel="noopener noreferrer"
//                     className={styles["repo-link"]}
//                     title="Open repository"
//                   >
//                     <GithubIcon />
//                   </a>
//                 )}
//               </div>
//               <div className={styles["tags-container"]}>
//                 {server.tags.map((tag, index) => (
//                   <span key={index} className={styles["tag"]}>
//                     {tag}
//                   </span>
//                 ))}
//               </div>
//               <div
//                 className={clsx(styles["mcp-market-info"], "one-line")}
//                 title={server.description}
//               >
//                 {server.description}
//               </div>
//             </div>
//             <div className={styles["mcp-market-actions"]}>
//               {isServerAdded(server.id) ? (
//                 <>
//                   {server.configurable && (
//                     <IconButton
//                       icon={<EditIcon />}
//                       text="Configure"
//                       onClick={() => setEditingServerId(server.id)}
//                       disabled={isLoading}
//                     />
//                   )}
//                   {checkServerStatus(server.id).status === "paused" ? (
//                     <>
//                       <IconButton
//                         icon={<PlayIcon />}
//                         text="Start"
//                         onClick={() => restartServer(server.id)}
//                         disabled={isLoading}
//                       />
//                       {/* <IconButton
//                         icon={<DeleteIcon />}
//                         text="Remove"
//                         onClick={() => removeServer(server.id)}
//                         disabled={isLoading}
//                       /> */}
//                     </>
//                   ) : (
//                     <>
//                       <IconButton
//                         icon={<EyeIcon />}
//                         text="Tools"
//                         onClick={async () => {
//                           setViewingServerId(server.id);
//                           await loadTools(server.id);
//                         }}
//                         disabled={
//                           isLoading ||
//                           checkServerStatus(server.id).status === "error"
//                         }
//                       />
//                       <IconButton
//                         icon={<StopIcon />}
//                         text="Stop"
//                         onClick={() => pauseServer(server.id)}
//                         disabled={isLoading}
//                       />
//                     </>
//                   )}
//                 </>
//               ) : (
//                 <IconButton
//                   icon={<AddIcon />}
//                   text="Add"
//                   onClick={() => addServer(server)}
//                   disabled={isLoading}
//                 />
//               )}
//             </div>
//           </div>
//         </div>
//       ));
//   };
//
//   return (
//     <ErrorBoundary>
//       <div className={styles["mcp-market-page"]}>
//         <div className="window-header">
//           <div className="window-header-title">
//             <div className="window-header-main-title">
//               MCP Market
//               {loadingStates["all"] && (
//                 <span className={styles["loading-indicator"]}>
//                   {loadingStates["all"]}
//                 </span>
//               )}
//             </div>
//             <div className="window-header-sub-title">
//               {Object.keys(config?.mcpServers ?? {}).length} servers configured
//             </div>
//           </div>
//
//           <div className="window-actions">
//             <div className="window-action-button">
//               <IconButton
//                 icon={<RestartIcon />}
//                 bordered
//                 onClick={handleRestartAll}
//                 text="Restart All"
//                 disabled={isLoading}
//               />
//             </div>
//             <div className="window-action-button">
//               <IconButton
//                 icon={<CloseIcon />}
//                 bordered
//                 onClick={() => navigate(-1)}
//                 disabled={isLoading}
//               />
//             </div>
//           </div>
//         </div>
//
//         <div className={styles["mcp-market-page-body"]}>
//           <div className={styles["mcp-market-filter"]}>
//             <input
//               type="text"
//               className={styles["search-bar"]}
//               placeholder={"Search MCP Server"}
//               autoFocus
//               onInput={(e) => setSearchText(e.currentTarget.value)}
//             />
//           </div>
//
//           <div className={styles["server-list"]}>{renderServerList()}</div>
//         </div>
//
//         {/*编辑服务器配置*/}
//         {editingServerId && (
//           <div className="modal-mask">
//             <Modal
//               title={`Configure Server - ${editingServerId}`}
//               onClose={() => !isLoading && setEditingServerId(undefined)}
//               actions={[
//                 <IconButton
//                   key="cancel"
//                   text="Cancel"
//                   onClick={() => setEditingServerId(undefined)}
//                   bordered
//                   disabled={isLoading}
//                 />,
//                 <IconButton
//                   key="confirm"
//                   text="Save"
//                   type="primary"
//                   onClick={saveServerConfig}
//                   bordered
//                   disabled={isLoading}
//                 />,
//               ]}
//             >
//               <List>{renderConfigForm()}</List>
//             </Modal>
//           </div>
//         )}
//
//         {viewingServerId && (
//           <div className="modal-mask">
//             <Modal
//               title={`Server Details - ${viewingServerId}`}
//               onClose={() => setViewingServerId(undefined)}
//               actions={[
//                 <IconButton
//                   key="close"
//                   text="Close"
//                   onClick={() => setViewingServerId(undefined)}
//                   bordered
//                 />,
//               ]}
//             >
//               <div className={styles["tools-list"]}>
//                 {isLoading ? (
//                   <div>Loading...</div>
//                 ) : tools?.tools ? (
//                   tools.tools.map(
//                     (tool: ListToolsResponse["tools"], index: number) => (
//                       <div key={index} className={styles["tool-item"]}>
//                         <div className={styles["tool-name"]}>{tool.name}</div>
//                         <div className={styles["tool-description"]}>
//                           {tool.description}
//                         </div>
//                       </div>
//                     ),
//                   )
//                 ) : (
//                   <div>No tools available</div>
//                 )}
//               </div>
//             </Modal>
//           </div>
//         )}
//       </div>
//     </ErrorBoundary>
//   );
// }
